<template>
  <div class="home">
    <my-header></my-header>
    <div class="main">
      <aside v-if="$store.state.token">
        <!-- 用户面板 -->
        <div class="user">
          <img :src="$store.state.user.portrait" alt="" />
          <div class="username">{{ $store.state.user.username }}</div>
          <div class="introduction">{{ $store.state.user.introduction }}</div>
          <div class="count">
            <div class="item">
              <span>{{number.myPostNum}}</span>
              <span>帖子数</span>
            </div>
            <div class="item">
              <span>{{number.applaudedNum}}</span>
              <span>获赞数</span>
            </div>
            <div class="item">
              <span>{{number.msgNum}}</span>
              <span>评论数</span>
            </div>
          </div>
        </div>

        <!-- 滚动信息 -->
        <marquee class="notice" behavior="scroll" direction="up">
          <el-tag type="success">第四届数据库设计大赛开始报名啦！！<i class="el-icon-edit"></i></el-tag>
          <el-tag type="success">心理疏导板块开启了，大家有任何问题都可以来咨询哦~<i class="el-icon-edit"></i></el-tag>
          <el-tag type="success">计算机程序设计大赛开始预热了！！<i class="el-icon-edit"></i></el-tag>
          <el-tag type="success">在繁忙的学习之路中也要进行适当的放松，让我们在休闲娱乐中放松下大脑吧！<i class="el-icon-edit"></i></el-tag>
        </marquee>
      </aside>
      <div class="content">
        <!-- 轮播图 -->
        <el-carousel
          trigger="click"
          :interval="4000"
          type="card"
          height="300px"
        >
          <el-carousel-item v-for="item of CarouseList" :key="item.bid">
            <a :href="item.url">
              <img :src="item.image" alt="" :title="item.name" />
            </a>
          </el-carousel-item>
        </el-carousel>
        <!-- 所有板块 -->
        <div class="all-plate">
          <el-button
            type="primary"
            v-for="val in allPlates"
            :key="val.sid"
            @click="toPlate(val.sid)"
            plain
          >
          <i :class="val.icon"></i>
            {{ val.title }}
          </el-button>
        </div>
        <!-- 热门板块 -->
        <div class="plates">
          <!-- 标题 -->
          <h2 class="title" slot="item-title">热门板块</h2>
          <!-- 板块轮播 -->
          <el-carousel
            height="300px"
            slot="item-plate"
            indicator-position="none"
            :loop="false"
            :autoplay="false"
          >
            <el-carousel-item
              class="carousel-plate"
              v-for="item of hotPlates"
              :key="item.pageId"
            >
              <el-card
                :body-style="{ padding: '0px' }"
                class="item-plate"
                v-for="index of item.page"
                :key="index.sid"
                :title="index.name"
                @click.native="toPlate(index.sid)"
              >
                <img
                  :src="index.portrait ? index.portrait : index.url"
                  alt=""
                />
                <h3>{{ index.name }}</h3>
                <div>
                  更新时间：{{
                    new Date(index.registerTime).toLocaleString("chinese", {
                      hour12: false,
                    })
                  }}
                </div>
              </el-card>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 推荐板块 -->
        <div class="plates">
          <!-- 标题 -->
          <h2 class="title" slot="item-title">推荐板块</h2>
          <!-- 板块轮播 -->
          <el-carousel
            height="300px"
            slot="item-plate"
            indicator-position="none"
            :loop="false"
            :autoplay="false"
          >
            <el-carousel-item
              class="carousel-plate"
              v-for="item of plates"
              :key="item.pageId"
            >
              <el-card
                :body-style="{ padding: '0px' }"
                class="item-plate"
                v-for="index of item.page"
                :key="index.sid"
                :title="index.name"
                @click.native="toPlate(index.sid)"
              >
                <img
                  :src="index.portrait ? index.portrait : index.url"
                  alt=""
                />
                <h3>{{ index.name }}</h3>
                <div>
                  更新时间：{{
                    new Date(index.registerTime).toLocaleString("chinese", {
                      hour12: false,
                    })
                  }}
                </div>
              </el-card>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from '../components/MyHeader.vue'
import { home } from '@/api/services/loginUser.services'
export default {
  data () {
    return {
      // 获赞等信息
      number: {
        applaudedNum: Number,
        msgNum: Number,
        myPostNum: Number
      },
      // 所有板块信息
      allPlates: [
        {
          sid: 1,
          icon: 'el-icon-news',
          title: '校园新闻'
        },
        {
          sid: 2,
          icon: 'el-icon-chat-line-round',
          title: '生活唠嗑'
        },
        {
          sid: 3,
          icon: 'el-icon-medal-1',
          title: '体育运动'
        },
        {
          sid: 4,
          icon: 'el-icon-reading',
          title: '学习交流'
        },
        {
          sid: 5,
          icon: 'el-icon-shopping-bag-2',
          title: '跳蚤市场'
        },
        {
          sid: 6,
          icon: 'el-icon-date',
          title: '考研冲刺'
        },
        {
          sid: 7,
          icon: 'el-icon-tickets',
          title: '失物招领'
        },
        {
          sid: 4399,
          icon: 'el-icon-truck',
          title: '休闲娱乐'
        },
        {
          sid: 425,
          icon: 'el-icon-first-aid-kit',
          title: '心理疏导'
        },
        {
          sid: 10,
          icon: 'el-icon-baseball',
          title: '校园活动'
        }
      ],
      // 推荐板块信息
      plates: [
        {
          pageId: 1,
          page: []
        },
        {
          pageId: 2,
          page: []
        }
      ],
      // 热门板块信息
      hotPlates: [
        {
          pageId: 1,
          page: []
        },
        {
          pageId: 2,
          page: []
        }
      ],
      // 轮播信息
      CarouseList: [
        {
          bid: 1,
          image:
            'https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png'
        },
        {
          bid: 2,
          image:
            'https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png'
        },
        {
          bid: 3,
          image:
            'https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png'
        }
      ]
    }
  },
  components: {
    MyHeader
  },
  methods: {
    // 跳转到板块
    toPlate (sid) {
      console.log('hhhh')
      if (sid === 4399) {
        this.$router.push('/game')
        return
      }
      if (sid === 425) {
        this.$router.push('/psychological')
        return
      }
      this.$router.push(`/plate?sid=${sid}`)
    },
    async creat () {
      const data = await home(localStorage.getItem('token'))
      console.log(data)
      this.CarouseList = data.board
      this.number = data.number
      this.chunk(data.section, 4, 0, 2, this.hotPlates)
      this.chunk(data.section, 4, 2, 4, this.plates)
    },
    // 分割数组
    chunk (arr, size, begin, end, pushArr) {
      const rsArr = []
      for (let i = 0; i < arr.length; i += size) {
        const temArr = []
        for (let j = 0; j < size && j + i < arr.length; j++) {
          temArr.push(arr[i + j])
        }
        rsArr.push(temArr)
      }
      rsArr.slice(begin, end).forEach((item, index) => {
        pushArr[index].page = item
      })
    }
  },
  mounted () {
    this.creat()
  }
}
</script>

<style lang="less" scoped>
.plates,
.all-plate,
.user,
.notice {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0px 10px -5px #949494;
}
.home {
  min-width: 1200px;
}
.main {
  width: 90%;
  margin: 20px auto;
  display: flex;
  .content {
    flex: 1;
  }
}
aside {
  width: 20%;
  height: 90vh;
  margin-right: 20px;
  position: sticky;
  top: 90px;
  left: 0;
  .user {
    background: url("@/assets/images/user/cover.jpg") no-repeat #fff;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px 40px;
    box-sizing: border-box;
    &::before {
      content: "";
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      height: 30px;
      z-index: 1;
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(rgba(255, 255, 255, 0)),
        to(#fff)
      );
    }
    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      z-index: 2;
    }
    .count {
      display: flex;
      justify-content: space-around;
      width: 100%;
      .item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:nth-child(-n + 2)::after {
          position: absolute;
          top: 12px;
          right: -20%;
          content: "";
          width: 1px;
          height: 30px;
          background: grey;
        }
      }
    }
  }
  .notice {
    height: 200px;
    margin-top: 30px;
    padding: 0 30px;
    .el-tag {
      width: 100%;
      font-size: 14px;
      white-space: normal;
      height:auto;
      margin: 20px 0;
      padding: 6px 10px;
    }
  }
}
.all-plate {
  display: grid;
  height: 150px;
  grid-template-columns: auto auto auto auto auto;
  align-content: space-around;
  place-items: center center;
  .el-button {
    width: 140px;
    font-size: 14px;
    margin: 0;
  }
}
img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.el-carousel {
  margin-bottom: 20px;
}
.plates {
  margin: 20px 0;
  padding: 10px 30px 20px 30px;
}
.title {
  border-left: 10px solid skyblue;
  padding: 10px;
  color: rgb(122, 214, 250);
}
.carousel-plate {
  display: flex;
  justify-content: space-around;
}
.item-plate {
  width:20%;
  cursor: pointer;
  text-align: center;
  img {
    width: 100%;
    height: 200px;
  }
  h3 {
    font-size: 16px;
    margin: 4px;
    margin: 20px 0 15px;
  }
  &:hover {
    color: skyblue;
  }
  div {
    font-size: 12px;
    color: grey;
  }
}
</style>
